<!--  门户-->
<template>
  <div class="door" ref="doorway">
    <div class="box">
      <div class="item" v-for="(item, index) in imgList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { getDoorImg } from "../../api/users";
export default {
  data() {
    return {
      imgList: [],
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.getPictures();
    window.addEventListener("resize", () => this.waterFall());
  },
  methods: {
    async getPictures() {
      let res = await getDoorImg();
      if (res.status == 200) {
        this.imgList = res.data;
        this.$nextTick(() => {
          this.whileFun();
        });
      } else {
        this.$message.err(res.message);
      }
    },
    whileFun() {
      let imgResult = this.waterFall();
      if (imgResult == false) {
        setTimeout(() => {
          this.whileFun();
        }, 3000);
      }
    },
    waterFall() {
      var arr = [],
        falg = true;
      let pageWidth = this.getClient().width,
        columns = 5,
        itemWidth = parseInt(pageWidth / columns) - 12;
      $(".box .item").width(itemWidth);
      $(".box .item").each(function (i) {
        let height = $(this).find("img")[0].height;
        if (height == 0) {
          falg = false;
          return false;
        } else {
          if (i < columns) {
            // 2 第一行按序布局
            $(this).css({
              top: 0,
              left: itemWidth * i + 10 * i,
            });
            //将行高push到数组
            arr.push(height);
          } else {
            // 其他行
            // 3 找到数组中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
              if (minHeight > arr[j]) {
                minHeight = arr[j];
                index = j;
              }
            }
            // 4 设置下一行的第一个盒子位置
            $(this).css({
              top: arr[index] + 20, //设置30的距离
              left: $(".box .item").eq(index).css("left"),
            });
            // 5 修改最小列的高度
            arr[index] = arr[index] + height + 20; //设置30的距离
          }
        }
      });
      return falg;
    },
    //获取当前屏幕的尺寸
    getClient() {
      return {
        width:
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth,
        height:
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight,
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.door {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .box {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    position: relative;
    &::-webkit-scrollbar {
      width: 0px;
    }
    .item {
      position: absolute;
      img {
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }
    }
  }
}
</style>